<template>
    <ul class="Cut">
        <li
            v-for="(item,index) in showList"
            :key="index"
            @click="changeShow(item)"
            :class="item.bool?'on':''"
        >
            <router-link :to="item.path">{{item.name}}</router-link>
        </li>
    </ul>
</template>
<script>
export default {
    name: 'Cut',
    data() {
        return {
            showList: [
                {
                    name: '首页',
                    path: '/dashboard',
                    bool: false
                },
                {
                    name: '应用',
                    path: '/dashuse',
                    bool: false
                }
            ]
        };
    },
    mounted() {
        this.showList[0].bool = true;
    },
    methods: {
        changeShow(item) {
            this.showList.forEach((v, i) => {
                v.bool = false;
                if (item.name == v.name) {
                    v.bool = true;
                }
            });
        }
    }
};
</script>
<style scoped>
.Cut > li {
    width: 120px;
    line-height: 70px;
    text-align: center;
}
.Cut > li > a {
    display: block;
    color: #fff;
}
.Cut > li:nth-child(2) {
    margin-left: 5px;
}
.on {
    border-bottom: 4px #fff solid;
    box-sizing: border-box;
}
</style>